import { ShopItem } from "@/api/depositsApi";
import clsx from "clsx";
import React from "react";
import styles from "./left.module.scss";

interface Props {
    data: any;
    onChange?: (idx: number) => void;
    channelData?: any;
    actIdx?: number;
}

const Left: React.FC<Props> = ({ channelData, data, actIdx = 0, onChange }) => {
    const doChange = (idx: number) => {
        if (actIdx !== idx && typeof onChange === "function") {
            onChange && onChange(idx);
        }
    };

    return (
        <div className="h-[100%] overflow-auto border border-y-0 border-[#5ec5ff] shadow-[0_0_25px_#3d4083_inset]">
            {channelData?.name && (
                <div className="py-[.06rem] text-center">
                    <img
                        src={channelData?.icon}
                        alt={channelData?.name}
                        className="inline-block h-[.2rem] object-cover"
                    />
                </div>
            )}
            {!!data?.length &&
                data.map((item: ShopItem, idx: number) => {
                    return (
                        <div
                            key={`${item.id}_${idx}`}
                            className={clsx(styles.item, { [styles.active]: actIdx === idx })}
                            onClick={() => doChange(idx)}
                        >
                            {item.name}
                        </div>
                    );
                })}
        </div>
    );
};

export default Left;